<template>
	<view class="contaniner">
		<view class="tab_nav">
			<view class="navTitle" v-for="(item,index) in navList" :key="index">
				<view :class="{'active':isActive === index}" @click="checked(index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="ipt">
			<image class="iptpic" mode="scaleToFill" src="/static/image/index/sousuo.png" />
			<input class="input" @confirm="doSearch" @blur="blurSearch" v-model="companyName" placeholder-style="font-size:28rpx" placeholder="请输入公司名称" />
		</view>
		<view style="margin-bottom: 20rpx;" class="card-item" @click="tap(item)" v-for='(item,index) in dataList' :key='item.id'>
			<view class="card-top-box">
				<view class="orderid">
					采购单号：{{item.purchaseNo}}
				</view>
				 <button v-if="item.status == 0" class="card-status" style="background: yellow;">审核中</button>
				 <button v-if="item.status == 1" class="card-status" style="background: blue;">通过</button>
				 <button v-if="item.status == 2" class="card-status" style="background: red;">未通过</button>
				 <button v-if="item.status == 3" class="card-status" style="background: red;">待接单</button>
				 <button v-if="item.status == 4" class="card-status" style="background: red;">采购中</button>
				 <button v-if="item.status == 5" class="card-status" style="background: red;">被退回</button>
			</view>
			<view class="card-content-box">
				<view class="content-box">
					<view class="item-box">
						<view class="title">
							标题：
						</view>
						<view class="value">
						{{item.title}}
						</view>
					</view>
					<view class="item-box">
						<view class="title">
						{{item.priority}}
						</view>
					</view>
				</view>
				<view class="content-box">
					<view class="item-box">
						<view class="title">
							供应商：
						</view>
						<view class="value" style="color:black;">
							{{item.supplier}}
						</view>
					</view>
				</view>
				<view class="content-box">
					<view class="item-box">
						<view class="title">
							物料种类：
						</view>
						<view class="value">
							{{item.materialSort}}
						</view>
					</view>
					<view class="item-box">
						<view class="title">
							含税金额：
						</view>
						<view class="value" style="color:red;">
						{{item.gstInclusiveCount}}
						</view>
					</view>
				</view>
				<view class="content-box">
					<view class="item-box">
						<view class="title">
							申请人：
						</view>
						<view class="value">
							{{item.applyUser}}
						</view>
					</view>
					<view class="item-box">
						<view class="value">
							{{item.applyTime}}
						</view>
					</view>
				</view>
				<view class="content-box">
					<view class="title">
						项目名称：{{item.projectName}}
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	export default {
		data() {
			return {
				dataList:[],
				companyName:'',
				isActive: 0,
				navList: [{
					index: 0,
					title: '待处理'
				}, {
					index: 1,
					title: "已收货"
				}]

			}
		},
		mounted() {
			this.stayList()
		},
		methods: {
			// 搜索
			blurSearch(){
			   this.stayList()
			},
			// 搜索回车
			doSearch(){
				this.stayList()
			},
			stayList(data) {
				let obj = {
					search: this.companyName,
					currentPage: 1
				}
				api.purchaseNoStay(obj).then(res => {
					console.log('res-->>', res)
					if(res.code == 0){
						let data = res.data
						this.dataList = data.result
						console.log('data-->>',this.dataList)
					}
					
				})
			},
			alreadyList(data) {
				let obj = {
					search: this.companyName,
					currentPage: 1
				}
				api.alreadyStay(obj).then(res => {
					if(res.code == 0){
						let data = res.data
						this.dataList = data.result
						console.log('alreadyData>>',this.alreadyData)
					}
					
				})
			},
			checked(index) {
				this.isActive = index
					console.log('index-->',index)
				if(index===0){
					this.stayList()
				}
				if((index===1)){
					this.alreadyList()
				}
			},
			tap(item) {
				console.log('item-->',item)
				uni.navigateTo({
					url: "/subcontractList/storage/purchaseNo/indexDetail?id="+item.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contaniner {
		width: 100%;
		height: 100vh;
		background: #fafbfb;
	}

	.ipt {
		width: 90%;
		height: 80rpx;
		background: white;
		border-radius: 20rpx;
		margin: 15rpx auto;
		display: flex;
		align-items: center;
		box-shadow: 0 0 6rpx 3rpx #ccc;
	}

	.iptpic {
		width: 40rpx;
		height: 50rpx;
		margin-left: 30rpx;
	}

	.input {
		background: white;

	}

	.card-item {
		box-shadow: 0 0 6rpx 3rpx #ccc;
		border-radius: 30rpx;
		background-color: white;
		overflow: hidden;
		margin: 0 auto;
		width: 92%;

		.card-top-box {
			background-color: #455da3;
			color: white;
			font-size: 24rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			position: relative;

			.orderid {
				line-height: 80rpx;
				height: 80rpx;
			}

			.card-status {
				background-color: red;
				width: fit-content;
				border-radius: 30rpx;
				padding: 0 20rpx;
				line-height: 60rpx;
				position: absolute;
				right: 20rpx;
				top: 10rpx;
				color: white;
				font-size: 26rpx;
			}
		}

		.card-content-box {
			padding: 20rpx 20rpx;
			box-sizing: border-box;

			.content-box {
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;

				.item-box {
					display: flex;
					line-height: 60rpx;

					.title {
						color: #585858;
					}

					.value {
						color: #7567be;
					}
				}
			}
		}
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}

	.active {
		position: relative;
		color: #333;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 8rpx;
		background-color: #FFC125;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
</style>
